<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>车位记录</span>
                </h3>
                <span class="m-section__sub">
                    <span>
                        <button
                            pButton
                            type="button"
                            label="[ 车场编号:{{ parkingCoce }} ,车场名称:{{
                                parkingName
                            }}]"
                            class="ui-button-success"
                        ></button>
                    </span>
                </span>
            </div>
            <div class="col text-right mt-3 mt-md-0">
                <button
                    (click)="
                        createOrEditPlaceModal.show(
                            parkingCoce,
                            parkingName,
                            parkingid,
                            neighbourhood_Name,
                            neighbourhood_id
                        )
                    "
                    class="btn btn-primary"
                >
                    <i class="fa fa-plus"></i> 添加车位
                </button>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <form class="horizontal-form" autocomplete="off">
                    <div class="m-form m-form--label-align-right">
                        <div class="row align-items-center m--margin-bottom-10">
                            <div class="col-xl-12">
                                <div
                                    class="
                                        form-group
                                        m-form__group
                                        align-items-center
                                    "
                                >
                                    <div class="input-group">
                                        <input
                                            [(ngModel)]="phone"
                                            name="filterText"
                                            autoFocus
                                            class="form-control m-input"
                                            placeholder="请输入查询手机号"
                                            type="number"
                                        />
                                        <span class="input-group-btn">
                                            <button
                                                (click)="getUserParking()"
                                                class="btn btn-primary"
                                                type="submit"
                                            >
                                                <i
                                                    class="flaticon-search-1"
                                                    [attr.aria-label]="
                                                        l('Search')
                                                    "
                                                ></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="tab-content">
                    <div class="row align-items-center">
                        <!--<Primeng-TurboTable-Start>-->
                        <div
                            class="primeng-datatable-container"
                            [busyIf]="primengTableHelper.isLoading"
                        >
                            <p-table
                                #dataTable
                                (onLazyLoad)="getPlaces($event)"
                                [value]="primengTableHelper.records"
                                rows="{{
                                    primengTableHelper.defaultRecordsCountPerPage
                                }}"
                                [paginator]="false"
                                [lazy]="true"
                                [scrollable]="true"
                                ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="
                                    primengTableHelper.resizableColumns
                                "
                            >
                                <ng-template pTemplate="header">
                                    <tr>
                                        <!-- <th style="width: 130px">
                                        {{ "Actions" | localize }}
                                    </th> -->
                                        <th
                                            style="
                                                width: 8%;
                                                text-align: center;
                                            "
                                        >
                                            车位名称
                                        </th>
                                        <th
                                            style="
                                                width: 8%;
                                                text-align: center;
                                            "
                                        >
                                            车位编号
                                        </th>
                                        <th
                                            style="
                                                width: 8%;
                                                text-align: center;
                                            "
                                        >
                                            车位状态
                                        </th>
                                        <th
                                            style="
                                                width: 20%;
                                                text-align: center;
                                            "
                                        >
                                            编辑
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template
                                    pTemplate="body"
                                    let-record="$implicit"
                                >
                                    <tr>
                                        <td
                                            style="
                                                width: 8%;
                                                text-align: center;
                                            "
                                        >
                                            {{ record.placeName }}
                                        </td>
                                        <td
                                            style="
                                                width: 8%;
                                                text-align: center;
                                            "
                                        >
                                            {{ record.placeNo }}
                                        </td>
                                        <td
                                            style="
                                                width: 8%;
                                                text-align: center;
                                            "
                                        >
                                            <span
                                                *ngIf="record.isRent == 0"
                                                class="
                                                    m-badge
                                                    m-badge--success
                                                    m-badge--wide
                                                "
                                                >未出租</span
                                            >
                                            <span
                                                *ngIf="record.isRent == 1"
                                                class="
                                                    m-badge
                                                    m-badge--danger
                                                    m-badge--wide
                                                "
                                                >已出租</span
                                            >
                                        </td>
                                        <td
                                            style="
                                                width: 20%;
                                                text-align: center;
                                            "
                                        >
                                            <button
                                                pButton
                                                type="button"
                                                label="编辑"
                                                class="
                                                    ui-button-rounded
                                                    ui-button-success
                                                "
                                                icon="fa fa-edit"
                                                style="margin-right: 0.5em"
                                                (click)="
                                                    createOrEditPlaceModal.show(
                                                        parkingCoce,
                                                        parkingName,
                                                        parkingid,
                                                        neighbourhood_Name,
                                                        neighbourhood_id,
                                                        record.id
                                                    )
                                                "
                                            ></button>
                                            <button
                                                pButton
                                                type="button"
                                                label="删除"
                                                class="
                                                    ui-button-rounded
                                                    ui-button-danger
                                                "
                                                icon="fa fa-trash"
                                                (click)="
                                                    deleteParkingGuard(record)
                                                "
                                            ></button>
                                            <button
                                                pButton
                                                type="button"
                                                label="租售信息"
                                                class="ui-button-rounded ui-button-default"                                               
                                                (click)="placeUserModal.show(record.id)"
                                            ></button>                                            
                                        </td></tr
                                ></ng-template>
                            </p-table>
                            <div
                                class="primeng-no-data"
                                *ngIf="
                                    primengTableHelper.totalRecordsCount == 0
                                "
                            >
                                {{ l("NoData") }}
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator
                                    rows="{{
                                        primengTableHelper.defaultRecordsCountPerPage
                                    }}"
                                    #paginator
                                    (onPageChange)="getPlaces($event)"
                                    [totalRecords]="
                                        primengTableHelper.totalRecordsCount
                                    "
                                    [rowsPerPageOptions]="
                                        primengTableHelper.predefinedRecordsCountPerPage
                                    "
                                >
                                </p-paginator>
                                <span class="total-records-count">
                                    共计：{{
                                        primengTableHelper.totalRecordsCount
                                    }}
                                </span>
                            </div>
                        </div>
                        <!--<Primeng-TurboTable-End>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <createOrEditPlaceModal
        #createOrEditPlaceModal
        (modalSave)="getPlaces()"
    ></createOrEditPlaceModal>
    <placeUserModal 
        #placeUserModal
        (modalSave)= "getPlaces()">        
    </placeUserModal>
</div>
